<%--
  Created by IntelliJ IDEA.
  User: huash
  Date: 2022/5/15
  Time: 11:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>酒店管理系统</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="${path}/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="${path}/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="${path}/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="${path}/plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="${path}/dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="${path}/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="${path}/plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="${path}/plugins/summernote/summernote-bs4.min.css">
  <!-- DataTables -->
  <link
          rel="stylesheet"
          href="${path}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css"
  />
  <link
          rel="stylesheet"
          href="${path}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css"
  />
  <link
          rel="stylesheet"
          href="${path}/plugins/datatables-buttons/css/buttons.bootstrap4.min.css"
  />
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"
        ><i class="fas fa-bars"></i
        ></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Navbar Search -->
      <li class="nav-item">
        <a
                class="nav-link"
                data-widget="navbar-search"
                href="#"
                role="button"
        >
          <i class="fas fa-search"></i>
        </a>
        <div class="navbar-search-block">
          <form class="form-inline">
            <div class="input-group input-group-sm">
              <input
                      class="form-control form-control-navbar"
                      type="search"
                      placeholder="Search"
                      aria-label="Search"
              />
              <div class="input-group-append">
                <button class="btn btn-navbar" type="submit">
                  <i class="fas fa-search"></i>
                </button>
                <button
                        class="btn btn-navbar"
                        type="button"
                        data-widget="navbar-search"
                >
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </li>

      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img
                      src="dist/img/user1-128x128.jpg"
                      alt="User Avatar"
                      class="img-size-50 mr-3 img-circle"
              />
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"
                  ><i class="fas fa-star"></i
                  ></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted">
                  <i class="far fa-clock mr-1"></i> 4 Hours Ago
                </p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img
                      src="dist/img/user8-128x128.jpg"
                      alt="User Avatar"
                      class="img-size-50 img-circle mr-3"
              />
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"
                  ><i class="fas fa-star"></i
                  ></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted">
                  <i class="far fa-clock mr-1"></i> 4 Hours Ago
                </p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img
                      src="dist/img/user3-128x128.jpg"
                      alt="User Avatar"
                      class="img-size-50 img-circle mr-3"
              />
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"
                  ><i class="fas fa-star"></i
                  ></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted">
                  <i class="far fa-clock mr-1"></i> 4 Hours Ago
                </p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer"
          >See All Messages</a
          >
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
              <span class="dropdown-item dropdown-header"
              >15 Notifications</span
              >
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2 days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer"
          >See All Notifications</a
          >
        </div>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <!-- Brand Logo -->
    <a href="#" class="brand-link">
      <img
              src="${path}/dist/img/AdminLTELogo.png"
              alt="AdminLTE Logo"
              class="brand-image img-circle elevation-3"
              style="opacity: 0.8"
      />
      <span class="brand-text font-weight-light">酒店管理系统</span>
    </a>

    <!-- SidebarSearch Form -->
    <div class="form-inline">
      <div class="input-group" data-widget="sidebar-search">
        <input
                class="form-control form-control-sidebar"
                type="search"
                placeholder="Search"
                aria-label="Search"
        />
        <div class="input-group-append">
          <button class="btn btn-sidebar">
            <i class="fas fa-search fa-fw"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul
              class="nav nav-pills nav-sidebar flex-column"
              data-widget="treeview"
              role="menu"
              data-accordion="false"
      >
        <!-- Add icons to the links using the .nav-icon class
         with font-awesome or any other icon font library -->
        <li class="nav-header">用户系统</li>
        <li class="nav-item">
          <a href="queryHotel_User_lfs.jsp" class="nav-link active">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>
              查询酒店
            </p>
          </a>
        </li>

        <li class="nav-item">
          <a href="bookHotel_lfs.jsp" class="nav-link">
            <i class="nav-icon fas fa-th"></i>
            <p>
              预定酒店
            </p>
          </a>
        </li>
        <li class="nav-item">
          <a href="detailHotel_lfs.jsp" class="nav-link">
            <i class="nav-icon fas fa-chart-pie"></i>
            <p>
              酒店详情
            </p>
          </a>
        </li>

      </ul>
    </nav>
    <!-- /.sidebar-menu -->
<!-- /.sidebar -->
</aside>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>查询酒店</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">主页</a></li>
            <li class="breadcrumb-item active">查询酒店</li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">

            <!-- /.card-header -->
            <div class="card-body">
              <table
                      id="tb_informations"
                      data-locale="zh-CN"
                      style="table-layout: fixed"
                      class="table table-bordered"
              ></table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
  <strong
  >Copyright &copy; 2022-2022
    <a href="https://adminlte.io">Douzi.wiki</a>.</strong
  >
  版权所有
  <div class="float-right d-none d-sm-inline-block">
    <b>Version</b> 0.0.1
  </div>
</footer>

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="${path}/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="${path}/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="${path}/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="${path}/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="${path}/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="${path}/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="${path}/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="${path}/plugins/moment/moment.min.js"></script>
<script src="${path}/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="${path}/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="${path}/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="${path}/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="${path}/dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="${path}/dist/js/pages/dashboard.js"></script>
<!-- 表格汉化 -->
<script src="${path}/plugins/bootstrap/js/bootstrap-table.min.js"></script>
<script src="${path}/plugins/bootstrap/js/bootstrap-table-locale-all.min.js"></script>
<script>
  var searchs = $("#searchs").val();
  //先销毁表格
  $("#tb_informations").bootstrapTable("destroy");
  $("#tb_informations").bootstrapTable({
    url: "${pageContext.request.contextPath}/api/ShowAllHotelServlet",
    method: "get",
    dataType: "json",
    dataField: "data",
    singleSelect: false,
    striped: true, //是否显示行间隔色
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    sortable: true, //是否启用排序
    sortName: "id",
    sortOrder: "asc", //默认排序
    pageNumber: 1, //初始化加载第一页，默认第一页
    pagination: true, //是否分页
    sidePagination: "client", //server:服务器端分页|client：前端分页
    queryParamsType: "",
    queryParams: function(params) {
      return {
        //这里的params是table提供的
        pageSize: params.pageSize,
        page: params.pageNumber,
      };
    },
    pageSize: 30, //单页记录数
    pageList: [5, 10, 20, 30, 50], //可选择单页记录数
    search: false,
    showToggle: false, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    toolbar: "#toolbars",
    columns: [
      {
        title: "编号",
        field: "id",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      },
      {
        title: "名称",
        field: "name",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      },
      {
        title: "城市",
        field: "city",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      },
      {
        title: "入住状态",
        field: "checkInStatus",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      },
      {
        title: "地址",
        field: "address",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      },
      {
        title: "介绍",
        field: "introduce",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      },
      {
        title: "联系方式",
        field: "contact",
        align: "center",
        width: 40,
        formatter: function(value, row, index) {
          return "<span title ='" + value + "'>" + value + "</span>";
        },
      }
    ],
    onLoadSuccess: function() {
      //加载成功时执行
      $("#theTable th").css("text-align", "center"); //设置表头内容居中
      $("#toolbars").parents("div:first").css({ width: "100%" });
    },
    onLoadError: function(res) {
    },
    onClickCell: function(field, value, row, $element) {
      console.log(row);
      console.log(row.id);
      var storage = window.localStorage;
      storage.setItem("id", row.id);
      window.location.href = "detailHotel_lfs.jsp";
    },
  });
</script>
</body>
</html>
